<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast} from "vant";

const router = useRouter();
// 跳转到加入队伍页
const doCreateTeam = () => {
  router.push({
    path: "/team/create"
  })
}
const teamList = ref([])
const active = ref('public')

const searchText = ref('')

const onTabChange = (name) => {
  if (name === "public") {
    searchTeam(searchText.value, 0);
  } else {
    searchTeam(searchText.value, 2);
  }
}
/**
 * 搜索队伍
 * @param val
 * @param status
 */
const searchTeam = async (val = '', status = 0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      current: 1,
      status: status
    }
  })
  if (res.code === 200) {
    teamList.value = res.data;
  } else {
    showFailToast('加载队伍失败，请刷新重试')
  }
}
onMounted(() => {
  searchTeam()
})

const onSearch = (val) => {
  searchTeam(val);
}
</script>

<template>
  <div id="teamPage">
    <van-search
        v-model="searchText"
        placeholder="请输入搜索关键词"
        @search="onSearch"
    />
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public"/>
      <van-tab title="加密" name="private"/>
    </van-tabs>
    <team-card-list :team-list="teamList"/>
    <van-empty v-if="teamList?.length < 1" description="数据为空"/>
    <van-button class="create-button" round icon="plus" type="primary" @click="doCreateTeam"/>

  </div>
</template>

<style scoped>

</style>
